<template>
  <div>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: white">
        <el-menu :default-openeds="['1']">

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-postcard"></i>信息修改
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/showinfo">
                <el-menu-item index="1-1">
                  基本信息
                </el-menu-item>

              </router-link>

              <router-link class="alink" to="/infoeditor">
                <el-menu-item index="1-2">
                  信息修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/imageUp">
                <el-menu-item index="1-3">
                  头像修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/countcontrol">
                <el-menu-item index="1-4">
                  账号管理
                </el-menu-item>
              </router-link>


            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-postcard"></i>文章管理</template>
            <el-menu-item-group>
              <router-link class="alink" to="/articlecontrol">
                <el-menu-item index="2-1">
                  文章管理
                </el-menu-item>
              </router-link>

            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-edit"></i>文章书写
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/writearticle">
                <el-menu-item index="3-1">
                  文章书写
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user"></i>关注的人
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/checkFollow">
                <el-menu-item index="3-1">
                  关注的人
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>

        </el-menu>
      </el-aside>

      <div>
        <div v-if="this.message.length===0" style="margin:20px"><h2>还没有发布文章哦</h2></div>
        <el-card shadow="hover" v-for="(item) in message" style="margin: 50px;width: 200%">
          <el-link style="font-size: 25px" type="primary" @click.native="toArticle(item.id)">{{ item.title }}</el-link>
          <el-button type="primary" icon="el-icon-delete" plain style="float: right"
                     @click="deleteThisArticle(item.id)"></el-button>
          <div>{{ item.authorName }}</div>
          <div style="text-align: right">浏览数：{{ item.views }} 点赞数：{{ item.likes }} {{ item.createTime }}</div>
        </el-card>
      </div>


    </el-container>

  </div>

</template>

<script>
import user from "@/store/user";

export default {
  name: "allArticle",
  data() {
    return {
      message: []
    }
  },
  created() {
    this.getAllArticle()
  },
  methods: {
    deleteThisArticle(id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteText(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    deleteText: function (id) {
      this.$axios({
        method: 'post',
        url: '/article/delete',
        data: ({
          articleID: id,
        })
      })
          .then(res => {
            if (res.data.code === 0) {
              this.$message.success("删除成功！")
              location.reload()
            } else {
              this.$message.error("删除失败！")
            }
          })

    },
    toArticle(id) {
      this.$router.push({path: '/text', query: {passageID: id}})
    },
    getAllArticle: function () {
      const userInfo = user.getters.getUser(user.state());
      var userid;
      if (userInfo === null) {
        this.$message.warning("请先登录")
        this.$router.push({path: '/login'})
      } else userid = userInfo.user.userID;
      this.$axios({
        method: 'post',
        url: '/article/manage',
        data: ({
          userID: userid,
        })
      })
          .then(res => {
            this.message = res.data.data
            for (let i in this.message) {
              this.message[i].createTime = this.message[i].createTime.replace(/T/g, " ")
              this.message[i].createTime = this.message[i].createTime.replace(/.000\+00:00/g, "")
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    }
  }
}
</script>

<style scoped>
.el-main {
  background-color: #F5F5F5;
  color: #333;
  text-align: center;
  line-height: 150px;
}

.login-bg {
  width: 95%;
  height: 100vh;

}
</style>
